<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>发布新商品</title>
    <style type="text/css">
        li {
            list-style-type: none;
            /* 去掉li前的点 */
            float: left;
            /*将li设置成做浮动，变为联动*/
        }

        a {
            display: block;
            /*将a变成块状*/
            width: 30vw;
            /*设置块的宽度*/
            height: 50px;
            /*设置块的长度*/
            font-family: Microsoft Yahei;
            line-height: 50px;
            /*设置字体在块中的高度*/
            background-color: #66B3FF;
            margin: 0px 0px;
            /*块里的高宽通过margin设置*/
            color: #fff;
            text-align: center;
            /*字体居中*/
            text-decoration: none;
            /*去掉下划线*/
            font-size: 15px;
            border: 5px;
            border-radius: 2px;
            border-color: black;
        }

        a:hover {
            background-color: #84C1FF;
        }

        .search {
            width: 60vw;
            border-color: cornflowerblue;
            margin-left: 150px;
            margin-top: 40px;
            height: 5vh;
            border-radius: 5px;
        }

        .bot1 {
            margin-top: 25px;
            margin-left: 45px;
            width: 10vw;
            height: 5vh;
            background-color: aquamarine;
            color: honeydew;
            border-radius: 5px;
            border-color: powderblue;
            font-family: Arial, Helvetica, sans-serif;
            font-size: large;
            opacity: 1;
        }

        .kind {
            margin-left: 6vw;
            margin-top: 20px;
            display: flex;
        }

        .smallKind {
            display: block;
            /*将a变成块状*/
            width: 12vw;
            /*设置块的宽度*/
            height: 50px;
            /*设置块的长度*/
            font-family: Microsoft Yahei;
            line-height: 54px;
            /*设置字体在块中的高度*/
            background-color: #66B3FF;
            margin: 0px 0px;
            /*块里的高宽通过margin设置*/
            color: #fff;
            text-align: center;
            /*字体居中*/
            text-decoration: none;
            /*去掉下划线*/
            font-size: 15px;
            border-color: black;
        }

        .bigbox {
            padding: 20px;
            display: flex;
            border: 3px solid #D9FFFF;
            width: 80vw;
            border-radius: 5px;
            margin-bottom: 15px;
        }

        .label {
            height: 30vh;
            width: 90vw;
            background-color: white;
            opacity: 0.9;
            border-radius: 5px;
            margin-top: 10px;
            margin-left: 30px;
            margin-bottom: 20px;
            display: flex;
            padding: 10px;
        }

        .bigbigbox {
            margin-left: 7vw;
            display: flex;
            justify-content: space-between;
            flex-wrap: wrap;
        }

        .info {
            line-height: 40px;
            font-weight: bold;
            font-size: medium;
            margin-left: 20px;
        }

        .name {
            font-size: xx-large;
            font-weight: bolder;
            margin-left: 3vw;
        }

        .time {
            font-size: larger;
            font-weight: bold;
            margin-left: 3vw;
        }

        .bot2 {
            width: 12vw;
            height: 5vh;
            background-color: aquamarine;
            color: honeydew;
            border-radius: 5px;
            border-color: powderblue;
            font-family: Arial, Helvetica, sans-serif;
            font-size: large;
            opacity: 1;
            justify-content: flex-end;
        }

        .box {
            margin-top: 20px;
            border-radius: 10px;
            margin-left: 150px;
            width: 80vw;
            height: 53vh;
            background-color: white;
            text-align: center;
            line-height: 40px;
            padding: 10px;
            opacity: 0.93;
            border: 3px solid 	#46A3FF;
        }
    </style>
</head>

<body>


    <div>
        <ul>
            <li><a href="" th:href="@{/market/index}" >物品展示</a></li>
            <li><a href="" th:href="@{/market/chat}">消息记录</a></li>
            <li><a href="" th:href="@{/market/my}">我的咸鱼</a></li>
        </ul>
    </div>
    <div style="color: white">asdasdfasdfasdffasdf</div>
    <div>
        <form>
            <a class="bot1" style="background-color:#66B3FF;display:inline;font-size: x-large;font-weight: bolder;color: white;" th:href="@{/market/my}">返回我的咸鱼</a>
            <div style="font-size: large;font-weight: bold;margin-left: 20px;display:inline">
                发布新商品：
            </div>
        </form>
    </div>

    <form role="form" action="/market/product/add" method="post" th:href="@{/market/product/add}" enctype="multipart/form-data">
    <div class="box">
        <div style="margin-left: 50px;">名称：
            <input style="margin-left: 40px;width: 30vw;" type="text" name="product_name" placeholder="请输入商品名称">
        </div>
        <div style="margin-left: 50px;">库存：
            <input style="margin-left: 40px;width: 30vw;" type="text" name="store" placeholder="请输入商品库存">
        </div>
        <div style="margin-left: 50px;">价格：
            <input style="margin-left: 40px;width: 30vw;"  name="price" type="text" placeholder="请输入商品价格">
        </div>
        <div style="margin-left: 50px;">介绍：
            <input style="margin-left: 40px;width: 30vw;" name="product_describe" type="text" placeholder="请输入一段文字介绍">
        </div>
        <div style="display: flex;margin-left: 50px;">
            <ul style="margin-left: 50px;">
                <li style="margin-left: 215px;
                line-height: 54px;">可选类别：</li>
                <li><input type="radio" name="product_class" value="1"/>衣服</li>
                <li><input type="radio" name="product_class" value="2"/> 食品</li>
                <li><input type="radio" name="product_class" value="3"/> 电子产品</li>
                <li><input type="radio" name="product_class" value="4"/> 书籍</li>
                <li><input type="radio" name="product_class" value="5"/> 化妆品</li>
                <li><input type="radio" name="product_class" value="6"/> 其他</li>
            </ul>
        </div>
        <div style="margin-left: 350px; display: flex;" >上传图书照片:
            <input class="post" type="file" id="test-image-file" name="picture"
                    accept="image/gif, image/jpeg, image/png, image/jpg" style="margin-left: 50px;">
        </div>
        <button type="submit" class="bot1">确认发布</button>
    </div>
    </form>
</body>

</html>